<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
    <style type="text/css">
        .aui-searchbar {
            background: transparent;
        }
        .aui-bar-nav .aui-searchbar-input {
            background-color: grey;
        }
        .aui-bar-light .aui-searchbar-input {
            background-color: grey;
        }
        .aui-content-padded {
            padding: 0.75rem;
            background-color: grey;
            margin-top: 0.75rem;
        }
    </style>
</head>
<body>
<header>
<div class="aui-title" style="position: absolute;z-index: 2;margin-top: 0">
    <div class="aui-searchbar" id="search">
        <div class="aui-searchbar-input aui-border-radius">
            <span class="aui-iconfont aui-icon-search"></span>
            <input type="search" placeholder="搜索题目/圈子/资源/攻略" id="search-input">
            <span class="aui-iconfont aui-icon-camera"></span>
        </div>
    </div>
</div>
</header>
<footer class="aui-bar aui-bar-tab" id="footer">
        <div class="aui-bar-tab-item" tapmode>
            <span class="aui-iconfont aui-icon-star"></span>
            <div class="aui-bar-tab-label">圈子</div>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            <span class="aui-iconfont aui-icon-comment"></span>
            <div class="aui-bar-tab-label">消息</div>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            <div class="aui-dot"></div>
            <span class="aui-iconfont aui-icon-my"></span>
            <div class="aui-bar-tab-label">我的</div>
        </div>
</footer>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript">
    var header = $api.byId('header');
    var headerPos = $api.offset(header);
    var current_footer = '';
    var photoBg = '';
    var body_h = $api.offset($api.dom('body')).h;
    var footer_h = $api.offset($api.byId('footer')).h;
    $api.setStorage('footerH1', footer_h);
    var UIScrollPicture;
    var p = ['http://p2.so.qhimg.com/t011d3ccbad92e11237.jpg', './res/t01c8026adad49a51f.jpg', './res/gogd.jpg'];
    apiready = function(){
        api.openFrame({
            name: 'main',
            url: './index_frm.html',
            bounces: true,
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto',
                marginBottom:footer_h
            },
            pageParam:{
                path:photoBg
            }
        });
        UIScrollPicture = api.require('UIScrollPicture');
        UIScrollPicture.open({
            rect : {
                x : 0,
                y : 0,
                w : api.winWidth,
                h : 150
            },
            data : {
                paths : ['http://p2.so.qhimg.com/t011d3ccbad92e11237.jpg',
                    './res/t01c8026adad49a51f.jpg',
                    './res/gogd.jpg'],
            },
            styles : {
                caption : {
                    height : 35,
                    color : '#E0FFFF',
                    size : 13,
                    bgColor : '#696969',
                    position : 'bottom'
                },
                indicator : {
                    align : 'center',
                    color : '#FFFFFF',
                    activeColor : '#DA70D6'
                }
            },
            placeholderImg : './res/slide1.jpg',
            contentMode : 'scaleToFill',
            interval : 3,
            loop : true,
            fixed : false,
            fixedOn:'main'
        },function (ret,error) {
            if (ret){
                photoBg = p[ret.index];
            }
        });
        api.setStatusBarStyle({
            style: 'light'
        });
        api.parseTapmode();
        FooterTap();
        current_footer = 'main'
    }

    function FooterTap() {
        current_footer = 'main';
        var tab = new auiTab({
            element:document.getElementById("footer")
        },function(ret){
            if(ret){
                <!--to do the change of the footer
                -->
                switch (ret.index){
                    case 1:
                        api.closeFrame({name:current_footer});
                        current_footer = 'main';
                        UIScrollPicture.open({
                                fixedOn:'main',
                            rect : {
                                x : 0,
                                y : 0,
                                w : api.winWidth,
                                h : 150
                            },
                            data : {
                                paths : ['http://p2.so.qhimg.com/t011d3ccbad92e11237.jpg',
                                    './res/t01c8026adad49a51f.jpg',
                                    './res/gogd.jpg'],
                            },
                            styles : {
                                caption : {
                                    height : 35,
                                    color : '#E0FFFF',
                                    size : 13,
                                    bgColor : '#696969',
                                    position : 'bottom'
                                },
                                indicator : {
                                    align : 'center',
                                    color : '#FFFFFF',
                                    activeColor : '#DA70D6'
                                }
                            },
                            placeholderImg : './res/slide1.jpg',
                            contentMode : 'scaleToFill',
                            interval : 3,
                            loop : true,
                            fixed : false
                        }
                            ,function (ret,error) {
                                if (ret){
                                    photoBg = p[ret.index];
                                }
                            });
                        api.openFrame({
                            name:'main' ,
                            url: './index_frm.html',
                            bounces: true,
                            rect: {
                                x: 0,
                                y: 0,
                                w: 'auto',
                                h: 'auto',
                                marginBottom:footer_h
                        },pageParam:{
                                path:photoBg
                            }});
                        break;
                    case 2:
                        api.closeFrame({name:current_footer});
                        current_footer = 'Message';
                        api.openFrame({
                            name:'Message',
                            url:'../message/message_head.html',
                            rect: {
                                x: 0,
                                y: 0,
                                w: 'auto',
                                h: 'auto',
                                marginBottom:footer_h
                            }
                        });
                        break;
                    case 3:
                        api.closeFrame({name:current_footer});
                        current_footer = 'Mine';
                        UIScrollPicture.close();
                        api.openFrame({
                            url:"../userMine/MineFragment_frm.html",
                            name:'Mine',
                            rect: {
                                x: 0,
                                y: 0,
                                w: 'auto',
                                h: 'auto',
                                marginBottom:footer_h
                        }})
                        break;
                    default:
                }

            }
        });

    }

    function closeWin(){
        api.closeWin({
        });
    }
</script>
</html>